<template>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!--<el-form>
          <el-form-item label="创建人id列表:">
            <el-select value="" placeholder="创建人id列表">
              <el-option v-for="item in create" :label="item.createor" :value="item.createor"></el-option>
            </el-select>
          </el-form-item>
        </el-form>-->
        <el-tab-pane label="全部题目" name="first">
          <div class="app-container" v-for="(item,index) in queryMatterList" :key="index" style="border: 1px solid rgb(220, 223, 230);border-radius: 10px;width: 1000px;margin-bottom: 20px">
            <div>
              <h1>{{item.id}}</h1>
              <h1>创作人:{{item.createor}}</h1>
              <h1>题目:</h1>
              <h2 v-if="item.matter_type==2">题目类型:填空题</h2>
              <h2 v-if="item.matter_type==0">题目类型:复合题</h2>
              <h2 v-if="item.matter_type==3">题目类型:简答题</h2>
              <div v-html="item.main.matter"></div>
              <div v-for="ite in item.matter.length">
                <div v-if="item.matter.length!=0">
                  <div v-html="item.matter[ite-1].main.matter"></div>
                </div>
                <div v-if="item.matter.length==0"></div>
              </div>
              <h1>解析:</h1>
              <div v-html="item.main.analysis"></div>
              <h1>答案:</h1>
              <div v-for="items in item.answer.length">
                <div v-if="item.answer.length!=0">
                  <h2 v-html="item.answer[items-1].answer" style="color: red;font-weight: bold"></h2>
                </div>
              </div>
              <h2 v-if="item.answer.length==0" style="color: red;font-weight: bold">空</h2>
              <div v-for="ite2 in item.matter.length">
                <div v-if="item.matter[ite2-1].answer.length!=0">
                  <h2 v-for="it in item.matter[ite2-1].answer.length" style="color: red;font-weight: bold">
                    {{item.matter[ite2-1].answer[it-1].answer}}
                  </h2>
                </div>
                <h2 v-if="item.matter[ite2-1].answer.length==0" style="color: red;font-weight: bold">空</h2>
              </div>
              <!--<div v-if="item.answer[0].answer!=null?item.answer[0].answer:1" style="margin-bottom: 20px"></div>-->
              <!--<div v-html="item.answer[index].answer" style="margin-bottom: 20px"></div>-->
              <el-button @click="editAdopt(item)" type="success" style="margin-left: 16px;">通过</el-button>
              <el-button @click="queryNoaudit(item)" type="danger" style="margin-left: 16px;">退回</el-button>
            </div>
          </div>
          <div class="block">
            <span class="demonstration"></span>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[2]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="选择题" name="second">
          <div class="app-container" v-for="(item,index) in queryMatterList" style="border: 1px solid rgb(220, 223, 230);border-radius: 10px;width: 1000px;margin-bottom: 20px">
            <div>
              <h1>编号:{{item.id}}</h1>
              <h1>题目:</h1>
              <div v-if="item.main.matter"></div>
              <h1>解析:</h1>
              <div v-html="item.main.analysis"></div>
              <h1>答案:</h1>
              <div v-html="item.answer.answer"></div>
              <el-button @click="updateChose(item)" type="primary" style="margin-left: 16px;">修改题目</el-button>
            </div>
          </div>
          <div class="block">
            <span class="demonstration"></span>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[2]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <!--<el-tab-pane label="填空题" name="third">填空题</el-tab-pane>
        <el-tab-pane label="简答题" name="fourth">简答题</el-tab-pane>-->
      </el-tabs>
      <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :with-header="false">
        <span>我来啦!</span>
      </el-drawer>
    </div>
</template>

<script>
  import { queryMatter,editAdopt,querycreateor,queryNoaudit,queryChose,updateChose } from '@/api/studentRecruit.js'
    export default {
        name: 'index',
      data() {
        return {
          total:0,
          page:1,
          limit:10,
          currentPage:1,
          activeName: 'first',
          create:null,
          clickData:null,
          createorId:null,
          queId:null,
          matters:null,
          drawer: false,
          queryMatterList:null,
          queryMatterCreateor:null,
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }]
        }
      },
      methods: {
        //修改题目
        async handleClick(e) {

        },
        handleSizeChange(val) {
          this.limit = val
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.page = val
          this.queryMatter()
          console.log(`当前页: ${val}`);
        },
        // 分页查询修复系统
        async queryMatter(){
          let queryData = {
            page:this.page,
            limit:2
          }
          let resData = await queryMatter(queryData)
          this.queryMatterList = resData.data.list.data
          this.createorId = resData.data.list.data[0].createor
          console.log('获取创建人id:',this.createorId)
          this.queryMatterCreateor = resData.data.createor
          console.log('分页查询修复系统list',this.queryMatterList)
          this.total = resData.data.list.total
          console.log('分页查询修复系统createor',this.queryMatterCreateor)
        },
        //通过按钮
        async editAdopt(e){
          let updateData = {
            id:e.id
          }
          let resData = await editAdopt(updateData)
          console.log(resData)
          console.log('通过:',e.id)
          this.$message.success('通过成功！')
          this.queryMatter()
        },
        //获取所有创建人
        async querycreateor(){
          let querycre = {

          }
          let createorData = await querycreateor(querycre)
          this.create = createorData.data
          console.log('查询的创建人:',this.create)
        },
        //退回题目
        async queryNoaudit(e){
          console.log('问题id:',e.main.id)
          let updateData = {
            id:e.main.id
          }
          let resData = await queryNoaudit(updateData)
          this.$message.error("退回成功!")
          console.log('退回题目',resData)
        },
        //分页查询选择题
        async queryChose(){
          let queryData = {
            page:1,
            limit:10,
          }
          let resData = await queryChose(queryData)
          console.log('分页查询选择题:',resData)
        },
        //修改题目
        async updateChose(e){
          this.drawer = true
          this.clickData = e
          this.matters = e.main.matter
          console.log(e);
          console.log(e.target);
          /*let updateData = {

          }
          let resData = await updateChose(updateData)
          console.log('修改题目:',resData)*/
        }
      },
      created() {
        // 分页查询修复系统
        this.queryMatter()
        this.querycreateor()
        this.queryChose()
      }
    }
</script>

<style scoped>

</style>
